<template>
  <view class="orderList">
    <view class="item" v-for="(item, index) in OrderList" :key="item._id">
      <view class="title">{{ item.hpv_name }} </view>
      <view class="info">
        <p>接种人：{{ item.name }}</p>
        <p>接种地点：{{ item.address }}</p>
        <p>疫苗套餐：{{ item.combo }} {{ item.ino_time }}</p>
        <p>订单编号：{{ item.order_number }}</p>
      </view>
      <view class="button" v-if="item.cancel">
        <p class="p">￥{{ item.price }}</p>
        <button class="button1" @click="CanCelOrder(item._id)">
          取消预约
        </button></view
      >
      <view class="button" v-else>
        <p class="p">￥{{ item.price }}</p>
        <button class="button2">已取消预约</button></view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { HpvUserOrderT } from "../../types/type";
// 获取数据
const OrderList = ref<HpvUserOrderT[]>([]);
const getList = async () => {
  const res: any = await api.hpvuser_order();
  console.log(res);
  OrderList.value = res.data;
};
onMounted(() => {
  getList();
});
const CanCelOrder = async (id: string) => {
  const res: any = await api.hpvcancel({ _id: id });
  console.log(res, "cancel");
  if (res.msg == "SUCCESS") {
    getList();
  }
};
</script>

<style lang="scss" scoped>
.orderList {
  width: 100vw;
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 0 30rpx;
  box-sizing: border-box;
  .item {
    width: 100%;
    //   height: 400rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    margin: 20rpx 0;
    .title {
      // padding: 50rpx 0;
      height: 100rpx;
      font-weight: 600;
      border-bottom: 1px solid #ccc;
      font-size: 35rpx;
      line-height: 100rpx;
    }
    .info {
      line-height: 60rpx;
    }
    .button {
      width: 100%;
      button {
        width: 250rpx;
        height: 80rpx;
        margin-left: 400rpx;
      }
      .p {
        margin-left: 550rpx;
      }
      .button1 {
        border: 1px solid #527be6;
        color: #527be6;
      }
      .button2 {
        border: 1px solid #ccc;
        color: #ccc;
      }
    }
  }
}
</style>
